<template>
  <el-card class="stats-summary" style="margin-bottom: 24px">
    <el-row :gutter="16">
      <el-col :xs="24" :sm="12" :md="6" v-for="(card, index) in statCards" :key="index">
        <el-card class="stat-card">
          <el-statistic
            :title="card.title"
            :value="card.value"
            :suffix="card.suffix"
            :precision="card.precision"
          >
            <template #prefix>
              <el-icon :style="{ color: card.color }" :size="24">
                <component :is="card.icon" />
              </el-icon>
            </template>
            <template #suffix>
              <span v-if="card.tooltip" style="margin-left: 8px">
                <el-tooltip :content="card.tooltip" placement="top">
                  <el-icon><QuestionFilled /></el-icon>
                </el-tooltip>
              </span>
              <span v-if="card.suffix">{{ card.suffix }}</span>
            </template>
          </el-statistic>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { View, User, Monitor, QuestionFilled } from '@element-plus/icons-vue'

interface Summary {
  totalPageViews?: number
  uniquePageViews?: number
  bounceRate?: number
  avgPageViews?: number
}

interface Props {
  summary?: Summary
}

const props = defineProps<Props>()

const totalPageViews = computed(() => Number(props.summary?.totalPageViews) || 0)
const uniquePageViews = computed(() => Number(props.summary?.uniquePageViews) || 0)
const bounceRate = computed(() => Number(props.summary?.bounceRate) || 0)
const avgPageViews = computed(() => {
  return uniquePageViews.value > 0 
    ? Number((totalPageViews.value / uniquePageViews.value).toFixed(1))
    : 0
})

const statCards = computed(() => [
  {
    title: '总访问量',
    value: totalPageViews.value,
    icon: View,
    color: '#409EFF',
    tooltip: '网站的总页面浏览量'
  },
  {
    title: '独立访客',
    value: uniquePageViews.value,
    icon: User,
    color: '#67C23A',
    tooltip: '独立访问用户数'
  },
  {
    title: '平均访问量',
    value: avgPageViews.value,
    icon: Monitor,
    color: '#E6A23C',
    tooltip: '平均每个独立访客的页面浏览量'
  },
  {
    title: '跳出率',
    value: bounceRate.value,
    suffix: '%',
    precision: 2,
    icon: Monitor,
    color: '#F56C6C',
    tooltip: '只访问一个页面就离开的访问比例'
  }
])
</script>

<style scoped lang="scss">
.stats-summary {
  .stat-card {
    text-align: center;
    border-radius: 8px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    }
  }
}
</style>

